<template>
  <div class="mod-sys__user">
    <el-form :model="state.dataForm" label-position="top" @keyup.enter="state.getDataList()">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="模糊搜索">
            <el-input v-model="state.dataForm.keywords" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年级">
            <el-select v-model="state.dataForm.gradeId" clearable placeholder="请选择" @change="gradeChange">
              <el-option :value="item.id" :label="item.text" v-for="(item, index) in gradeList"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="班级">
            <el-select v-model="state.dataForm.classId" clearable placeholder="请选择" @change="state.getDataList">
              <el-option :value="item.id" :label="item.text" v-for="(item, index) in classList"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" justify="end">
        <el-form-item>
          <el-button @click="state.getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 20px;">
          <el-button v-if="state.hasPermission('study:student:save')" type="primary"
            @click="addOrUpdateHandle()">新增</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 20px;">
          <el-button v-if="state.hasPermission('study:student:save')" type="primary"
            @click="leadingInHandle()">导入</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 20px;">
          <el-button v-if="state.hasPermission('study:student:delete')" type="danger"
            @click="state.deleteHandle()">删除</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border
      @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle"
      style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="stuNum" label="学号" sortable="custom" header-align="center"
        align="center"></el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" align="center"></el-table-column>
      <el-table-column prop="gradeName" label="年级" header-align="center" align="center"></el-table-column>
      <el-table-column prop="className" label="班级" sortable="custom" header-align="center"
        align="center"></el-table-column>
      <el-table-column prop="idCard" label="身份证号" sortable="custom" header-align="center"
        align="center">
        <template v-slot="scope">
          <span>{{ esensitize(scope.row.idCard, 6, 8) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button v-if="state.hasPermission('study:student:update')" type="primary" link
            @click="addOrUpdateHandle(scope.row)">修改</el-button>
          <el-button v-if="state.hasPermission('study:student:delete')" type="primary" link
            @click="state.deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>

    <!-- 导入 -->
    <leading-in ref="leadingInRef" @refreshDataList="state.getDataList"></leading-in>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import baseService from "@/service/baseService";
import { esensitize } from "@/utils/utils";
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const gradeList = ref<any[]>([]);
const classList = ref<any[]>([]);

const view = reactive({
  getDataListURL: "/study/student/page",
  getDataListIsPage: true,
  deleteURL: "/study/student",
  deleteIsBatch: true,
  dataForm: {
    keywords: "",
    gradeId: "",
    classId: "",
  },
  leadingInVisiable: false,
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateHandle = (row?: any) => {
  router.push({
    path: '/study/student/edit',
    query: {
      row: JSON.stringify(row)
    },
  });
};

const leadingInRef = ref();
const leadingInHandle = () => {
  leadingInRef.value.init({
    title: '学生',
    templateFile: '/src/assets/file/student-template.xlsx',
    uploadPath: '/study/student/import',
    templatePath: '/study/student/getTemplate',
  });
};

// 获取年级
const getGradeList = () => {
  return baseService.get("/study/grade/select").then((res) => {
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    gradeList.value = res.data;
  });
};

// 获取班级
const getClassList = (gradeId: string) => {
  return baseService.get("/study/class/select", { gradeId }).then((res) => {
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    classList.value = res.data;
  });
};

const gradeChange = (e: string) => {
  state.dataForm.classId = "";
  getClassList(e);
  state.getDataList();
};

onMounted(() => {
  getGradeList();
})
</script>
